<template>
	<view class="wrapper">
		<custom-nav-bar :opacityVal="opacityVal" :titleName="'我的数据'" :titleColor="'#000'"></custom-nav-bar>
		<view class="user-bg">
			<image src="../../static/images/data-bg.png" mode="widthFix" class="user-img"></image>
		</view>
		<view class="main-content" :style="{top: `${customBar}px`}">
			<view class="top-tab" :style="{height: `${50}px`}">
				<view class="tab-bar">
					<view class="type-btn" :class="{'active': item.isSelect}" v-for="(item, index) in topBarList" :key="index"
					@click="switchingSelection(item, index)">
					    <text>{{item.label}}</text>
						<span class="underline" :class="{'activeUnderline': item.isSelect}"></span>
					</view>
				</view>
				<view class="data-switch">
					<view class="data-switch-bar" @click="toogleDataSwitchBar()" v-if="!showDataSwitchBar">
						<view class="label">{{dataFilterConditionStr}}</view>
						<image src="../../static/images/data-down.png" mode="aspectFit" class="down"
						:class="{'data-switch-down-rotate': showDataSwitchBar, 'data-switch-down-rotate-reverse': !showDataSwitchBar}"></image>
					</view>
					<view class="menu" v-if="showDataSwitchBar"
					:class="{'menu-down': showDataSwitchBar}">
						<view class="item" v-for="(item, index) in dataFilterConditionList" :key="index" @click="switchingTimeSoltSelection(item)">
							{{item.label}}
						</view>
					</view>
				</view>
			</view> 
			<scroll-view :show-scrollbar="false" scroll-y="true" class="scroll-box" :style="{height: `calc(100vh - ${customBar + 50}px)`}" @scroll="scrollBg">
				<view class="player-info-box">
					<view class="player">
						<view class="avatar-box">
							<image :src="userAvatarUrl" mode="aspectFit" class="user-avatar" v-if="userAvatarUrl"></image>
						</view>
						<view class="right-info">
							<view class="player-name">丁俊晖</view>
							<view class="tips">
								共与<text>50</text>人交手
							</view>
						</view>
					</view>
					<view class="data-list" v-if="tabIndex == 0">
						<view class="data-item" v-for="(item, index) in battleDataList" :key="index">
							<view class="top-val">{{item.value}}</view>
							<view class="bottom-label">{{item.label}}</view>
						</view>
					</view>
					<view class="data-list" v-if="tabIndex == 1">
						<view class="data-item" v-for="(item, index) in myDataList" :key="index">
							<view class="top-val">{{item.value}}</view>
							<view class="bottom-label">{{item.label}}</view>
						</view>
					</view>
					<view class="my-data-detail" v-if="tabIndex == 1">
						<view class="detail-info" v-if="showMyDataDetailState"
						:class="{'list-enter-active': showMyDataDetailState}">
							<view class="left">
								<view class="item" v-for="(item, index) in leftDetailList" :key="index">
									<view class="circle"></view>
									<view class="label">{{item.label}}：</view>
									<view class="value">{{item.value}}</view>
								</view>
							</view>
							<view class="right">
								<view class="item" v-for="(item, index) in rightDetailList" :key="index">
									<view class="circle"></view>
									<view class="label">{{item.label}}：</view>
									<view class="value">{{item.value}}</view>
								</view>
							</view>
						</view>
						<view class="detail-box" @click="showMyDataDetail()">
							<text>{{!showMyDataDetailState ? '详情' : '收起'}}</text>
							<image src="../../static/images/data-detail-down.png" mode="aspectFit" class="detail-down" 
							:class="{'detail-down-rotate': showMyDataDetailState, 'detail-down-rotate-reverse': !showMyDataDetailState}">
							</image>
						</view>
					</view>
					
				</view>
				<view class="battle-situation-box" v-if="tabIndex == 0">
					<view class="battle-situation-top">
						<view class="left-title">对战情况</view>
						<view class="vs-switch">
							<view class="switch-bar" @click="toogleBar()">
								<view class="label">{{battleFilterConditionStr}}</view>
								<image src="../../static/images/data-black-down.png" mode="aspectFit" class="down"
								:class="{'switch-down-rotate': showSwitchBar, 'switch-down-rotate-reverse': !showSwitchBar}">
								</image>
							</view>
							<view class="menu" v-if="showSwitchBar"
							:class="{'menu-down': showSwitchBar}">
								<view class="item" v-for="(item, index) in battleFilterConditionList" :key="index" @click="switchBarSelected(item)">
									{{item.label}}
								</view>
							</view>
						</view>
					</view>
					<view class="battle-situation-list">
						<view class="battle-situation-item" v-for="(item, index) in battleSituationList" :key="index" @click="toFullFieldRecord()">
							<view class="top-bar">
								<view class="left" v-if="item.hasUnlockedVideo">
									<image src="../../static/images/data-vidicon.png" mode="aspectFit" class="vidicon"></image>
									<text>含已解锁视频</text>
								</view>
								<view class="left-empty" v-else></view>
								<view class="center">共{{item.fieldNum}}场</view>
								<view class="right">{{item.date}}</view>
							</view>
							<view class="center-info">
								<view class="left">
									<image :src="item.leftPlayerAvatar" mode="aspectFit" class="avatar"></image>
									<view class="player-name">{{item.leftPlayerName}}</view>
									<view class="win-value">{{item.leftPlayerWins}}胜</view>
								</view>
								<view class="center">
									<view class="top-rate">
										<view class="left-rate">{{item.leftPlayerRate}}</view>
										<image src="../../static/images/data-vs.png" mode="aspectFit" class="center-vs"></image>
										<view class="right-rate">{{item.rightPlayerRate}}</view>
									</view>
									<view class="bottom-data-bar">
										<view class="left-player" :style="{
											'width': `${item.leftPlayerWins / (item.leftPlayerWins + item.rightPlayerWins) * 100}%`
										}"></view>
										<view class="right-player" :style="{
											'width': `${item.rightPlayerWins / (item.leftPlayerWins + item.rightPlayerWins) * 100}%`
										}"></view>
									</view>
								</view>
								<view class="right">
									<image :src="item.leftPlayerAvatar" mode="widthFix" class="avatar"></image>
									<view class="player-name">{{item.leftPlayerName}}</view>
									<view class="win-value">{{item.leftPlayerWins}}胜</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="my-data" v-if="tabIndex == 1">
					<view class="hint-box">
						<view class="left">
							<view class="yellow"></view>
							<view class="best">最佳</view>
						</view>
						<view class="right">
							<view class="blue"></view>
							<view class="average">平均</view>
						</view>
					</view>
					<view class="statistics-box" v-for="(item, index) in statisticsList" :key="index">
						<view class="label">{{item.label}}</view>
						<!-- 时间 -->
						<view class="statistics" v-if="item.type == 'strokeTime'">
							<view class="top-tips">
								<view class="front" :style="{'width': `${item.best / (item.average * 2) * 100}%`}">{{item.best}}s</view>
								<view class="back" :style="{'width': `${50}%`}">{{item.average}}s</view>
							</view>
							<view class="bottom-bar">
								<view class="yellow-bar" :style="{
									'width': `${item.best / (item.average * 2) * 100}%`, 
									'z-index': (item.best < item.average ? 3 : 1)
								}">
								</view>
								<view class="blue-bar" :style="{'width': `${50}%`, 'z-index': 2}"></view>
							</view>
						</view>
						<!-- 成功率 -->
						<view class="statistics" v-if="item.type == 'successRate'"> 
							<view class="top-tips">
								<view class="front" :style="{'width': `${item.best}%`}">{{item.best}}%</view>
								<view class="back" :style="{'width': `${item.average}%`}">{{item.average}}%</view>
							</view>
							<view class="bottom-bar">
								<view class="yellow-bar" :style="{'width': `${item.best}%`, 'z-index': (item.best < item.average ? 3 : 1)}"></view>
								<view class="blue-bar" :style="{'width': `${item.average}%`, 'z-index': 2}"></view>
							</view>
						</view>
						<!-- 次数 -->
						<view class="statistics" v-if="item.type == 'numberTimes'">
							<view class="top-tips">
								<view class="front" :style="{'width': `${item.best < 10 ? item.best / 0.1 : item.best / 0.5}%`}">
									{{item.best}}次
								</view>
								<view class="back" :style="{'width': `${0}%`}"></view>
							</view>
							<view class="bottom-bar">
								<view class="yellow-bar" :style="{'width': `${item.best < 10 ? item.best / 0.1 : item.best / 0.5}%`, 'z-index': 3}"></view>
								<view class="blue-bar" :style="{'width': `${0}%`, 'z-index': 2}"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="empty"></view>
			</scroll-view>
		</view>
		<view class="float-window">
			<image src="../../static/images/data-menu.png" mode="aspectFit" class="float-menu"></image>
		</view>
		<daily-sign-in/>
		<boot-add-applet/>
	</view>
</template>

<script>
	import customNavBar from "@/components/custom-nav-bar.vue";
	import dailySignIn from "@/components/daily-sign-in.vue";
	import bootAddApplet from "@/components/boot-add-applet.vue";
	
	export default {
		data() {
			const globalData = getApp().globalData;
			const customBar	= uni.getStorageSync('CustomBar');
			const dataFilterConditionList = [{
				label: '全部',
				type: 1,
			},{
				label: '本月',
				type: 2,
			},{
				label: '本周',
				type: 3,
			}];
		    const battleFilterConditionList = [{
				label: '最新',
				type: 1,
			},{
				label: '胜率最高',
				type: 2,
			},{
				label: '场次最多',
				type: 3,
			}];
			return {
				globalData,
				customBar,
				opacityVal: 'transparent',
				accessToken: uni.getStorageSync("accessToken"),
				userAvatarUrl: '', 
				showSwitchBar: false,
				showDataSwitchBar: false,
				dataFilterConditionStr: dataFilterConditionList[0].label,
				dataFilterConditionList: dataFilterConditionList,
				topBarList: [{
					label: '对战记录',
					type: 1,
					isSelect: true,
				},{
					label: '我的数据',
					type: 2,
					isSelect: false,
				}],
				battleDataList: [{
					value: '200',
					label: '场次'
				},{
					value: '4000',
					label: '局数'
				},{
					value: '90%',
					label: '场胜率'
				},{
					value: '80%',
					label: '局胜率'
				}],
				myDataList: [{
					value: '90%',
					label: '黑八成功率'
				},{
					value: '70%',
					label: '进球成功率'
				},{
					value: '13秒',
					label: '平均出杆时间'
				}],
				leftDetailList: [{
					label: '总场数',
					value: '52场'
				},{
					label: '总局数',
					value: '52场'
				},{
					label: '总进球',
					value: '52场'
				},{
					label: '总得分',
					value: '52场'
				},{
					label: '活跃天数',
					value: '52场'
				}],
				rightDetailList: [{
					label: '炸清',
					value: '10次'
				},{
					label: '接清',
					value: '9次'
				},{
					label: '大金',
					value: '1次'
				},{
					label: '小金',
					value: '2次'
				},{
					label: '黄金9',
					value: '1次'
				}],
				battleFilterConditionStr: battleFilterConditionList[0].label,
				battleFilterConditionList: battleFilterConditionList,
				battleSituationList: [{
					hasUnlockedVideo: true,
					fieldNum: 20,
					date: '2024/07/03',
					leftPlayerAvatar: '../../static/images/data-left-player.png',
					leftPlayerName: '丁俊晖',
					leftPlayerWins: 15,
					leftPlayerRate: '63%',
					rightPlayerAvatar: '../../static/images/data-right-player.png',
					rightPlayerName: '特鲁姆普',
					rightPlayerWins: 4,
					rightPlayerRate: '33%'
				},{
					hasUnlockedVideo: true,
					fieldNum: 18,
					date: '2024/07/03',
					leftPlayerAvatar: '../../static/images/data-left-player.png',
					leftPlayerName: '丁俊晖',
					leftPlayerWins: 20,
					leftPlayerRate: '90%',
					rightPlayerAvatar: '../../static/images/data-right-player.png',
					rightPlayerName: '特鲁姆普',
					rightPlayerWins: 1,
					rightPlayerRate: '5%'
				},{
					hasUnlockedVideo: false,
					fieldNum: 15,
					date: '2024/07/03',
					leftPlayerAvatar: '../../static/images/data-left-player.png',
					leftPlayerName: '丁俊晖',
					leftPlayerWins: 8,
					leftPlayerRate: '33%',
					rightPlayerAvatar: '../../static/images/data-right-player.png',
					rightPlayerName: '丁俊晖',
					rightPlayerWins: 19,
					rightPlayerRate: '67%'
				},{
					hasUnlockedVideo: false,
					fieldNum: 15,
					date: '2024/07/03',
					leftPlayerAvatar: '../../static/images/data-left-player.png',
					leftPlayerName: '丁俊晖',
					leftPlayerWins: 8,
					leftPlayerRate: '33%',
					rightPlayerAvatar: '../../static/images/data-right-player.png',
					rightPlayerName: '丁俊晖',
					rightPlayerWins: 19,
					rightPlayerRate: '67%'
				},{
					hasUnlockedVideo: false,
					fieldNum: 15,
					date: '2024/07/03',
					leftPlayerAvatar: '../../static/images/data-left-player.png',
					leftPlayerName: '丁俊晖',
					leftPlayerWins: 8,
					leftPlayerRate: '33%',
					rightPlayerAvatar: '../../static/images/data-right-player.png',
					rightPlayerName: '丁俊晖',
					rightPlayerWins: 19,
					rightPlayerRate: '67%'
				}],
				statisticsList: [{
					label: '平均出杆时间',
					best: 8,
					average: 12,
					type: 'strokeTime'
				},{
					label: '进球成功率',
					best: 90,
					average:68,
					type: 'successRate'
				},{
					label: '长台成功率',
					best: 92,
					average: 65,
					type: 'successRate'
				},{
					label: '走位成功率',
					best: 90,
					average: 72,
					type: 'successRate'
				},{
					label: '开球成功率',
					best: 72,
					average: 48,
					type: 'successRate'
				},{
					label: '犯规次数',
					best: 6,
					average: 0,
					type: 'numberTimes'
				},{
					label: '平均失误次数',
					best: 3,
					average: 0,
					type: 'numberTimes'
				}],
				tabIndex: 0,
				showMyDataDetailState: false,
			}
		},
		components: {
			dailySignIn,
			bootAddApplet,
			customNavBar
		},
		onLoad() {
			
		},
		onShow() {
			this.userAvatarUrl = uni.getStorageSync('userAvatarUrl');
			console.log(this.userAvatarUrl);
		},
		onPullDownRefresh() {
			console.log('页面下拉了...');
			setTimeout(() => {
				uni.stopPullDownRefresh(); //停止下拉
			}, 600);
		},
		methods: {
			toogleBar() {
				this.showSwitchBar = !this.showSwitchBar;
			},
			switchBarSelected(item) {
				this.battleFilterConditionStr = item.label;
				this.showSwitchBar = false;
			},
			toogleDataSwitchBar() {
				this.showDataSwitchBar = true;
			},
			switchingTimeSoltSelection(item) {
				this.dataFilterConditionStr = item.label;
				this.showDataSwitchBar = false;
			},
			switchingSelection(item, index){
				this.tabIndex = index;
				this.topBarList.forEach((el, index) => {
					el.isSelect = false;
				});
				item.isSelect = true;
			},
			toFullFieldRecord() {
				uni.navigateTo({
					url: '/pages/dataInformation/fullFieldRecord'
				});
			},
			showMyDataDetail() {
				this.showMyDataDetailState = !this.showMyDataDetailState;
			}
		}
	}
</script>

<style scoped lang="scss">	
	.wrapper{
		position: relative;
		background: #F1F2F6;
		height: 100vh;
		@mixin font-style {
			background: $gradient-color;
			-webkit-background-clip: text;
			color: transparent;
			font-weight: bold;
		}
		.float-window{
			position: fixed;
			right: 0;
			bottom: 100px;
			background: $main-color;
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			.float-menu{
				width: 50upx;
				height: 50upx;
			}
		}
		.user-bg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			.user-img{
				width: 100%;
			}
		}
		.main-content{
		    padding: 0 30upx;
			position: relative;
			.top-tab{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100upx;
				.tab-bar{
					display: flex;
					align-items: center;
					.type-btn{
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						color: $gray-color;
						font-size: 32upx;
						margin-right: 30upx;
						.underline{
							width: 70upx;
							height: 6upx;
							margin-top: 4upx;
						}
						.activeUnderline{
							width: 70upx;
							height: 6upx;
							margin-top: 4upx;
							border-radius: 6upx;
							background-image: $gradient-color;
						}
					}
					.active{
						@include font-style;
						font-size: 36upx;
					}
				}
				.data-switch{
					position: relative;
					width: 130upx;
					height: 60upx;
					.data-switch-bar{
						display: flex;
						background: rgba(255, 255, 255, 0.5);
						border-radius: 50upx;
						width: 130upx;
						height: 60upx;
						line-height: 60upx;
						justify-content: center;
						align-items: center;
						.label{
							@include font-style;
							font-size: 26upx;
						}
						.down{
							width: 40upx;
							height: 40upx;
						}
						.data-switch-down-rotate{
							transform: rotate(180deg); /* 将图片旋转180度 */
							transition: transform 0.5s ease;
						}
						.data-switch-down-rotate-reverse{
							transform: rotate(0deg);
							transition: transform 0.5s ease; /* 添加过渡动画效果，持续0.5秒，缓和动画效果 */
						}
					}
					.menu{
						width: 130upx;
						display: flex;
						flex-direction: column;
						background: rgba(255, 255, 255, 0.5);
						border-radius: 40upx;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 9;
						// max-height: 0; /* 默认收起 */
						.item{
							text-align: center;
							height: 60upx;
							line-height: 60upx;
							font-size: 26upx;
							@include font-style;
						}
					}
					.menu-down{
						animation: menumove 0.2s ease 0s 1 normal;
						max-height: 200upx;
					}
					@keyframes menumove {
						0% {max-height: 0;}
						100% {max-height: 200upx;}
					}
				
				}
			}
			.scroll-box{
				.player-info-box{
					margin-bottom: 40upx;
					.player{
						display: flex;
						padding: 30upx 0;
						.avatar-box{
							width: 120upx;
							height: 120upx;
							margin-right: 40upx;
							position: relative;
							.user-avatar{
								position: absolute;
								left: 0;
								top: 0;
								width: 100%;
								height: 100%;
								border-radius: 20upx;
							}
						}
						.right-info{
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							.player-name{
								font-size: 36upx;
								color: $black-color;
								font-weight: bold;
							}
							.tips{
								color: $gray-color;
								display: flex;
								flex-direction: row;
								align-items: center;
								font-size: 26upx;
								text{
									margin: 0 6upx;
									font-size: 36upx;
									@include font-style()
								}
							}
						}
					}
					.data-list{
						display: flex;
						justify-content: space-around;
						.data-item{
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;
							.top-val{
								@include font-style();
								font-size: 36upx;
								margin-bottom: 8upx;
							}
							.bottom-label{
								color: $gray-color;
								font-size: 26upx;
							}
						}
					}
					.my-data-detail{
						padding-top: 40upx;
						.detail-box{
							display: flex;
							align-items: center;
							justify-content: center;
							text{
								font-size: 28upx;
								margin-right: 8upx;
							}
							.detail-down{
								width: 34upx;
								height: 34upx;
							}
							.detail-down-rotate{
								transform: rotate(180deg); /* 将图片旋转180度 */
								transition: transform 0.5s ease;
							}
							.detail-down-rotate-reverse {
							  transform: rotate(0deg);
							  transition: transform 0.5s ease; /* 添加过渡动画效果，持续0.5秒，缓和动画效果 */
							}
						}
						.detail-info{
							width: 90%;
							margin: 0 auto 30upx;
							display: flex;
							border-bottom: 2upx solid #d1d1d1;
							padding-bottom: 20upx;
							max-height: 0; /* 默认收起 */
							overflow: hidden;
							.left,.right{
								display: flex;
								flex-direction: column;
								flex: 1;
								.item{
									display: flex;
									align-items: center;
									margin-bottom: 16upx;
									.circle{
										width: 18upx;
										height: 18upx;
										border-radius: 50%;
										background: $gray-color;
										margin-right: 16upx;
									}
									.label{
										font-size: 30upx;
										color: $gray-color;
									}
									.value{
										color: $black-color;
										font-size: 30upx;
										font-weight: 600;
									}
								}
							}
							.left{
								flex: 1;
							}
							.right{
								flex: 0.8;
							}
						}
						.list-enter-active{
							animation: detailmove 0.2s ease 0s 1 normal;
							max-height: 600upx;
						}
						@keyframes detailmove {
							0% {max-height: 0;}
							100% {max-height: 600upx;}
						}
					}
				}
				
				.battle-situation-box{
					width: 100%;
					.battle-situation-top{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.left-title{
							color: $black-color;
							font-size: 36upx; 
							font-weight: 600;
						}
						.vs-switch{
							position: relative;
							.switch-bar{
								display: flex;
								padding-right: 20upx;
								height: 50upx;
								line-height: 50upx;
								align-items: center;
								.label{
									text-align: right;
									width: 110upx;
									color: $black-color;
									font-size: 26upx;
									white-space: nowrap;
								}
								.down{
									width: 40upx;
									height: 40upx;
								}
								.switch-down-rotate{
									transform: rotate(180deg); /* 将图片旋转180度 */
									transition: transform 0.5s ease;
								}
								.switch-down-rotate-reverse{
									transform: rotate(0deg);
									transition: transform 0.5s ease; /* 添加过渡动画效果，持续0.5秒，缓和动画效果 */
								}
							}
							.menu{
								display: flex;
								flex-direction: column;
								background: #fff;
								border-radius: 10upx;
								position: absolute;
								top: 60upx;
								left: 0;
								z-index: 9;
								padding: 14upx 30upx 0 14upx;
								box-shadow: 0px 0px 10upx 6upx rgba(0, 0, 0, 0.2);
								// max-height: 0; /* 默认收起 */
								.item{
									font-size: 26upx;
									margin-bottom: 15upx;
								}
							}
							.menu-down{
								animation: menumove 0.2s ease 0s 1 normal;
								max-height: 200upx;
							}
							@keyframes menumove {
								0% {max-height: 0;}
								100% {max-height: 200upx;}
							}
						}
						
					
					}
					.battle-situation-list{
						padding: 20upx 0 0;
						.battle-situation-item{
							background: #fff;
							border-radius: 20upx;
							margin-bottom: 20upx;
							padding: 0 20upx;
							.top-bar{
								display: flex;
								justify-content: space-between;
								align-items: center;
								position: relative;
								.left{
									flex: 1;
									display: flex;
									justify-content: flex-start;
									align-items: center;
									.vidicon{
										width: 30upx;
										height: 30upx;
										margin-right: 10upx;
									}
									text{
										color: $green-color;
										font-size: 22upx;
										font-weight: 600;
									}
								}
								.left-empty{
									flex: 1;
								}
								.center{
									background: $main-color;
									border-radius: 0 0 18upx 18upx;
									font-size: 22upx;
									color: #fff;
									padding: 4upx 25upx;
								}
								.right{
									flex: 1;
									display: flex;
									justify-content: flex-end;
									color: $gray-color;
									font-size: 24upx;
								}
							}
							.center-info{
								padding: 16upx;
								display: flex;
								justify-content: space-between;
								.left,.right{
									display: flex;
									flex-direction: column;
									align-items: center;
									.avatar{
										margin-top: 10upx;
										width: 80upx;
										height: 80upx;
										border-radius: 80upx;
									}
									.player-name{
										color: $black-color;
										font-weight: 600;
										margin: 10upx 0;
									}
									.win-value{
										color: $main-color;
										font-size: 24upx;
										font-weight: 600;
									}
								}
								.center{
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									.top-rate{
										display: flex;
										align-items: center;
										.left-rate{
											font-size: 46upx;
											font-weight: bold;
											color: $green-color;
										}
										.center-vs{
											width: 70upx;
											height: 100upx;
											margin: 0 50upx;
										}
										.right-rate{
											font-size: 46upx;
											font-weight: bold;
											color: $black-color;
										}
									}
									.bottom-data-bar{
										width: 100%;
										height: 10upx;
										border-radius: 10upx;
										display: flex;
										flex-direction: row;
										overflow: hidden;
										margin-bottom: 10upx;
										.left-player{
											background: $main-color;
										}
										.right-player{
											background: $yellow-color;
										}
									}
								}
							}
						}
					}
				}
				.my-data{
					background: #fff;
					border-radius: 20upx;
					padding: 20upx;
					.hint-box{
						display: flex;
						justify-content: center;
						align-items: center;
						border-bottom: 2upx solid #fff;
						padding-bottom: 25upx;
						font-weight: 500;
						font-size: 32upx;
						.left{
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 40upx;
							.yellow{
								width: 25upx;
								height: 25upx;
								background: $yellow-color;
								border-radius: 20upx;
								margin-right: 10upx;
							}
							.best{
								
							}
						}
						.right{
							display: flex;
							justify-content: center;
							align-items: center;
							.blue{
								width: 25upx;
								height: 25upx;
								background: $main-color;
								border-radius: 20upx;
								margin-right: 10upx;
							}
							.average{
								
							}
						}
					}
					.statistics-box{
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 16upx;
						.label{
							font-size: 26upx;
							white-space: nowrap;
							width: 180upx;
							display: flex;
							flex-direction: column;
							justify-content: flex-end;
						}
						.statistics{
							flex: 1;
							.top-tips{
								width: 100%;
								height: 40upx;
								display: flex;
								position: relative;
								.front,.back{
									position: absolute;
									top: 0;
									left: 0;
									display: flex;
									justify-content: flex-end;
									align-items: center;
									font-size: 26upx;
									font-weight: 600;
								}
								.front{
									color: $yellow-color;
								}
								.back{
									color: $main-color;
								}
							}
							.bottom-bar{
								margin-bottom: 10upx;
								width: 100%;
								background: #ededed;
								height: 12upx;
								border-radius: 12upx;
								position: relative;
								.yellow-bar{
									position: absolute;
									top: 0;
									left: 0;
									height: 12upx;
									background: $yellow-color;
									border-radius: 12upx;
								}
								.blue-bar{
									position: absolute;
									top: 0;
									left: 0;
									height: 12upx;
									background: $main-color;
									border-radius: 12upx;
								}
							}
						}
					}
				}
				.empty{
					height: 30upx;
				}
			}
		}
		
	}

</style>
